<template>
	<view class="container">
			<view class="h-container">
				<view class="header">
					<view class="header-return" @click="returnclick()"></view>
					<view class="header-title">往期回放</view>
				</view>
				<view style="height:36px;width:100vw;background-color: #fff;">
					<uni-search-bar @confirm="search" v-model="queryForm.nameOrtitle" placeholder="请输入教师姓名或标题" @clear="search" clearButton="auto" cancelButton="none">
					</uni-search-bar>
				</view>
				<view>
					<view class="body-ask-button">
						<view class="body-ask-button-select">
							<uni-data-select
							v-model="queryForm.periodCode"
							:localdata="perioddata"
							@change="periodchange"
							:clear="false"
							placeholder="学段"
							></uni-data-select>
						</view>
						<view class="body-ask-button-select subjectselect">
							<uni-data-select
							ref="mySelector"
							v-model="queryForm.subjectCode"
							:localdata="subjectdata"
							@change="subjectchange"
							:clear="false"
							placeholder="学科"
							></uni-data-select>
						</view>
					</view>
				</view>
			</view>
			
			<mescroll-uni style="min-height: 0;" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="body">
					<view class="body-lecture-piece shadow" v-for="(item,index) in list" :key="index" @click="details(item)">
						<view class="body-lecture-piece-video">
							<!-- <view class="uni-video-cover-play-button buttonlocation"></view> -->
							<img class="body-lecture-piece-img" :src="item.hpic" ></img>
						</view>
						<view class="body-lecture-piece-title">
							<view class="body-lecture-piece-text">{{item.title}}</view>
							<view class="body-lecture-piece-tags">
								<uni-tag :text="item.period" type="primary" custom-style="background-color: #fdf2ee; border-color: #fdf2ee; color: #e98e68;"/>
								<uni-tag :text="item.subject" type="primary" custom-style="background-color: #eaf9f4; border-color: #eaf9f4; color: #2ca37b;" />
							</view>
							<view class="body-lecture-piece-director textover" v-show="item.director">学校：{{item.director}}</view>
							<view class="body-lecture-piece-actor textover" v-show="item.actor">主讲人：{{item.actor}}</view>
						</view>
						<!-- <view class="body-lecture-piece-introduction textover">{{item.newsAbstract}}</view> -->
						<!-- <view class="cover" @click="details(item)">
							
						</view> -->
					</view>
				</view>
			</mescroll-uni>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { gethalllist2 } from "@/api/index";
	import { getperiod } from "@/utils/auth7";
	import { getsubject } from "@/utils/auth6";
	
import { settime0 } from "../utils/auth3";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				list:[],
				queryForm:{
					nameOrtitle:'',//教师姓名或标题
					periodCode:'',//学段
					subjectCode:''//学科
				},
				perioddata: [{text:'全部',value:null},...getperiod()],
				subjectdata: [{text:'全部',value:null},...getsubject()],
				isFromPeriod:true,
			
			}
		},
		activated(){
			this.Initialize()
			//不知道为什么返回时标题还是视频详情，这里手动修改
			uni.setNavigationBarTitle({  
				title: '往期回放'  
			});  
		},
		created() {
		},
		methods: {
			subjectchange(e) {
				//选择学段时，清空学科也会进入此方法，
				if(this.isFromPeriod){
					this.isFromPeriod = false;
				}else{
					this.queryForm.subjectCode = e
					this.getSearchData();
				}
			},
			periodchange(e) {
				this.queryForm.periodCode = e
				// if (this.$refs.mySelector && this.$refs.mySelector.clear) {  
				// 	this.isFromPeriod = true;
				// 	this.$refs.mySelector.clear(); // 假设组件提供了clear方法  
				// }  
				// let period = getperiod();
				// for (let i in period) {
				// 	if (period[i].value == e) {
				// 		this.subjectdata = [{text:'全部',value:null},...getperiod()[i].baseSubject];
				// 	}
				// }
				this.getSearchData();
			},
			search(){
				this.getSearchData();
			},
			getSearchData(){
				try {
					this.mescroll.resetUpScroll();
				} catch (error) {
				}
			},
			Initialize(){
				
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let data = {
					"functionName":"getCurrentNodeNews",
					"nodeId":"430",
					"pageNum": page.num,
					"pageSize": page.size,
					...this.queryForm
				}
				if(page.num==1){this.list=[]}
				gethalllist2(data).then(res => {
					let data = res.rows;
					for(let i in data){
						if(!data[i].hpic){
							data[i].hpic = data[i].hpic
						}
					}
					console.log("data",data)
					console.log("data.length",data.length)
					console.log("res.data.total",res.total)
					if(page.num==1){this.list=[]}
					this.mescroll.endSuccess(data.length);
					this.list=this.list.concat(data);
					// console.log("this.list",this.list)
				});
			},
			details(item){
				this.$store.state.user.refresh = !this.$store.state.user.refresh
				this.$store.state.user.videodetails = item
				this.$router.push('/pages/videodetails')
			},
			returnclick(){
				this.$router.push('/pages/index')
			},
		},
	}
</script>

<style scoped>
	.container {
		font-size: 4vw;
		width: 100vw;
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: start;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw 10vh auto;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		/* border: 1px solid #F6F7F8; */
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		margin: 0vw 0 0 0;
		width: 100%;
		/* max-height: calc(100vh - 14.5vw); */
		display: grid;
		justify-items: center;
		align-items: start;
		grid-row-gap: 3vw;
		grid-template-columns: 1fr;
		/* grid-template-rows: 1fr; */
		/* overflow: auto; */
	}
	.body-lecture-piece{
		width: 94vw;
		height: 34vw;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-template-columns: 43vw 45vw;
		/* grid-template-rows: 67.5% 3fr 2fr; */
		border-radius: 2.2vw;
		background-color: #ffffff;
		padding:2vw;
		grid-column-gap: 2vw;
	}
	.body-lecture-piece-video{
		/* width: 100%;
		height: 88%; */
		width: 43vw;
		height: 26.4vw;
		/* border-radius: 2.2vw  2.2vw  0vw 0vw; */
		background-color: #000;
	}
	.body-lecture-piece-img{
		width: 100%;
		height: 100%;
		pointer-events: none;
		object-fit: contain;
		/* border-radius: 2.2vw  2.2vw  0vw 0vw; */
		object-fit:fill;
	}
	.buttonlocation{
		position: absolute;
		margin: 10vw 18.7vw 0 18.7vw;
	}
	.body-lecture-piece-title{
		margin-top: -1vw;
		width: 45vw;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-column-gap: 1vw;
		grid-template-rows: 3fr 2fr 1fr 1fr;
	}
	.body-lecture-piece-tags{
		width: 44vw;
		height: 100%;
		display: flex;
		justify-items: start;
		align-items: center;
		grid-column-gap: 1.5vw;
	}
	.body-lecture-piece-actor{
		width: 44vw;
		height: 100%;
		text-align: left;
		font-size: 3vw;
		color: gray;
	}
	.body-lecture-piece-director{
		width: 44vw;
		height: 100%;
		text-align: left;
		font-size: 3vw;
		color: gray;
	}
	/* .body-lecture-piece-icon{
		width: 4vw;
		height: 4vw;
		background: url(../static/index/hot.gif);
		background-size: 100% 100%;
	} */
	.body-lecture-piece-text{
		overflow: hidden;
		word-wrap: break-word;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
		width: 45vw;
		font-size: 4vw;
		font-weight: 600;
	}
	.body-lecture-piece-introduction{
		width: 45vw;
		font-size: 3vw;
	}
	.textover{
		overflow: hidden;  /* 超出一行文字自动隐藏 */
		text-overflow: ellipsis;  /*文字隐藏后添加省略号*/
		white-space: nowrap;   /*强制不换行*/
	}
	.cover{
		position: absolute;
		width: 48vw;
		height: 40vw;
		border-radius: 2.2vw  2.2vw  0vw 0vw;
	}
	/deep/ .mescroll-uni-fixed{
		top: calc(25vw + 36px)!important;
	}
	.search-bar {  
		display: flex;  
		align-items: center;  
		background-color: #fff;  
		padding: 10px;  
		border-radius: 5px;  
		margin-bottom: 20px;  
	}  
	
	.search-input {  
		flex: 1;  
		height: 30px;  
		padding: 0 10px;  
		border: none;  
		border-radius: 5px;  
		font-size: 16px;  
	}  
	/deep/ .uni-searchbar__box{
		border-radius: 18px !important;
		justify-content: start !important;
	}
	.h-container{
		-webkit-user-drag: none;
		-moz-user-drag: none;
		-ms-user-drag: none;
		user-drag: none;
		user-select: none;
		touch-action: none;
	}
	.body-ask-button {
		padding: 0 5vw;
		width: 100%;
		height: 10vw;
		background: #ffffff;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-column-gap: 1vw;
		grid-template-columns: 1fr 1fr;
		/* grid-template-rows: 25vw auto; */
	}
	
	/deep/ .uni-easyinput {
		padding: 0 0 0 2vw;
	}
	
	.body-ask-button-search /deep/ .is-input-border {
	/* border: none; */
		border-radius: 5vw;
	}
	.body-ask-button-select{
		width:100%;
	}
	.body-ask-button-select /deep/ .uni-select {
		
		border-radius: 5vw;
	}
	::v-deep .uni-select{
		border: none !important;
	}
	::v-deep .uni-select__input-text{
		width:auto;
	}
	::v-deep .uni-select__input-box{
		justify-content: center;
	}
	.uni-searchbar{
		padding: 0 10px !important;
	}
</style>